<template>
  <div class="question">
    <!-- 搜索部分 -->
    <el-card>
      <el-form ref="searchFormRef" :model="searchForm" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="学科" prop="subject">
              <el-select v-model="searchForm.subject" placeholder="请选择学科">
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="阶段" prop="step">
              <el-select v-model="searchForm.step" placeholder="请选择阶段">
                <el-option
                  v-for="(value, name) in stepObj"
                  :key="value"
                  :label="value"
                  :value="name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="企业" prop="enterprise">
              <el-select
                v-model="searchForm.enterprise"
                placeholder="请选择企业"
              >
                <el-option
                  v-for="item in enterpriseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="题型" prop="type">
              <el-select v-model="searchForm.type" placeholder="请选择题型">
                <el-option
                  v-for="(value, name) in typeObj"
                  :key="value"
                  :label="value"
                  :value="name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                v-model="searchForm.difficulty"
                placeholder="请选择难度"
              >
                <el-option
                  v-for="(value, name) in difficultyObj"
                  :key="value"
                  :label="value"
                  :value="name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="作者" prop="username">
              <el-input v-model="searchForm.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="status">
              <el-select
                class="selectWidth"
                v-model="searchForm.status"
                placeholder="请选择状态"
              >
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期" prop="create_date">
              <el-date-picker
                v-model="searchForm.create_date"
                placeholder="请选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="标题" prop="title">
              <el-input v-model="searchForm.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="10px">
              <el-button @click="search" type="primary">搜索</el-button>
              <el-button @click="clear" type="default">清除</el-button>
              <el-button @click="add" type="primary">+新增试题</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 列表部分 -->
    <el-card style="margin-top:25px;">
      <el-table :data="questionList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="题目" width="200">
          <template v-slot="scope">
            <div v-html="scope.row.title"></div>
          </template>
        </el-table-column>
        <el-table-column
          label="学科.阶段"
          :formatter="formatterSubjectAndStep"
          width="150"
        />
        <el-table-column label="题型" :formatter="formatterType" />
        <el-table-column label="企业" :formatter="formatterEnterprise" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span :class="scope.row.status === 0 ? 'red' : ''">{{
              scope.row.status === 0 ? '禁用' : '启用'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reads" label="访问量" />
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="default">编辑</el-button>
            <el-button
              @click="changeStatus(scope.row.id)"
              :type="scope.row.status === 0 ? 'success' : 'default'"
              >{{ scope.row.status === 0 ? '启用' : '禁用' }}</el-button
            >
            <el-button @click="del(scope.row.id)" type="default"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div style="text-align:center;height:50px;padding-top:20px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 5, 10, 20, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增/修改题目模态框 -->
    <question
      ref="questionRef"
      :mode="mode"
      :subjectList="subjectList"
      :stepObj="stepObj"
      :enterpriseList="enterpriseList"
      :typeObj="typeObj"
      :difficultyObj="difficultyObj"
    ></question>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import {
  getSubjectList,
  getEnterpriseList,
  getQuestionList,
  changeQuestionStatus,
  deleteQuestion
} from '@/api/question'
import Question from '@/views/question/question-add-or-update.vue'
@Component({
  name: 'MyQuestion',
  components: {
    Question
  }
})
export default class QuestionList extends Vue {
  declare subjectList: any
  declare enterpriseList: any
  declare questionList: any
  declare page: number
  declare limit: number
  declare total: number
  declare searchForm: any
  declare stepObj: any
  declare mode: string

  data() {
    return {
      // 搜索对象
      searchForm: {
        subject: null, // 学科
        step: null, // 阶段
        enterprise: null, // 企业
        type: null, // 题型
        difficulty: null, // 难度
        username: null, // 作者
        status: null, // 状态
        create_date: null, // 日期
        title: null // 标题
      },
      stepObj: { 1: '初级', 2: '中级', 3: '高级' }, // 阶段
      typeObj: { 1: '单选', 2: '多选', 3: '简答' }, // 类型
      difficultyObj: { 1: '简单', 2: '一般', 3: '困难' }, // 难度
      subjectList: [], // 学科列表
      enterpriseList: [], // 企业列表
      questionList: [], // 题目列表
      page: 1, // 当前页码
      limit: 2, // 当前页容量
      total: 0, // 总条数
      mode: 'add'
    }
  }
  created() {
    this.getSubjectListData()
    this.getEnterpriseListData()
    this.getQuestionListData()
  }
  // 获取学科数据
  async getSubjectListData() {
    const res = await getSubjectList()

    if (res.data.code === 200) {
      this.subjectList = res.data.data.items
    }
  }
  // 获取企业数据
  async getEnterpriseListData() {
    const res = await getEnterpriseList()

    if (res.data.code === 200) {
      this.enterpriseList = res.data.data.items
    }
  }
  // 获取题目列表
  async getQuestionListData() {
    const res = await getQuestionList({
      page: this.page,
      limit: this.limit,
      ...this.searchForm
    })

    if (res.data.code === 200) {
      this.questionList = res.data.data.items
      this.total = res.data.data.pagination.total
    }
  }
  search() {
    this.page = 1

    this.getQuestionListData()
  }
  clear() {
    ;(this.$refs.searchFormRef as any).resetFields()

    this.search()
  }
  // 页容量的改变
  handleSizeChange(size: number) {
    this.limit = size

    this.search()
  }
  // 页码改变
  handleCurrentChange(page: number) {
    this.page = page

    this.getQuestionListData()
  }
  // 格式化学科和阶段
  formatterSubjectAndStep(row: any) {
    if (row && row.subject) {
      const subject = this.subjectList.find(
        (item: any) => item.id === row.subject
      )
      const stepName = this.stepObj[row.step]

      return `${subject.name}.${stepName}`
    } else {
      return null
    }
  }
  // 格式化题型
  formatterType(row: any) {
    switch (row.type) {
      case 1:
        return '单选'

      case 2:
        return '多选'

      case 3:
        return '简答'

      default:
        return ''
    }
  }
  // 格式化企业
  formatterEnterprise(row: any) {
    if (row.enterprise) {
      const enterprise = this.enterpriseList.find(
        (item: any) => item.id === row.enterprise
      )
      return enterprise ? enterprise.name : null
    } else {
      return null
    }
  }
  // 更改状态
  async changeStatus(id: string) {
    const res = await changeQuestionStatus({ id })

    if (res.data.code === 200) {
      this.$message.success('更改状态成功~')

      this.search()
    }
  }
  // 新增
  add() {
    this.mode = 'add'
    ;(this.$refs.questionRef as any).questionForm = {
      // 这个里面是需要提交给后台的
      title: '', // 标题
      subject: null, // 学科id
      step: null, // 阶段
      enterprise: null, // 企业id
      city: null, // 城市
      type: 1, // 题型
      difficulty: 1, // 难度
      single_select_answer: null, // 单选答案
      multiple_select_answer: [], // 多选答案
      short_answer: null, // 简答题答案
      video: '', // 解析视频地址
      answer_analyze: null, // 答案解析
      remark: null, // 备注
      select_options: [
        {
          label: 'A',
          text: '狗不理',
          image: ''
        },
        {
          label: 'B',
          text: '猫不理',
          image: ''
        },
        {
          label: 'C',
          text: '麻花',
          image: ''
        },
        {
          label: 'D',
          text: '炸酱面',
          image: ''
        }
      ] // 选项
    }
    ;(this.$refs.questionRef as any).dialogFormVisible = true
  }
  // 修改
  edit(val: any) {
    this.mode = 'edit'
    ;(this.$refs.questionRef as any).questionForm = JSON.parse(
      JSON.stringify(val)
    )
    if ((this.$refs.questionRef as any).questionForm.city) {
      ;(this.$refs.questionRef as any).questionForm.city = (this.$refs
        .questionRef as any).questionForm.city.split(',')
    }
    if ((this.$refs.questionRef as any).questionForm.multiple_select_answer) {
      ;(this.$refs
        .questionRef as any).questionForm.multiple_select_answer = (this.$refs
        .questionRef as any).questionForm.multiple_select_answer.split(',')
    }
    ;(this.$refs.questionRef as any).dialogFormVisible = true
  }
  // 删除
  del(id: string) {
    this.$confirm('确定删除该条记录吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await deleteQuestion({ id })

      if (res.data.code === 200) {
        this.$message.success('删除成功~')

        this.search()
      }
    })
  }
}
</script>

<style lang="scss">
.question {
  .selectWidth {
    width: 180px;
  }
  .red {
    color: red;
  }
}
</style>
